<template>
  <div class="equip-container">
    <!-- 页面标题 -->
    <div class="page-header">
      <text class="page-title">选择武学装备到槽位{{ slotIndex + 1 }}</text>
    </div>

    <!-- 当前装备的武学 -->
    <div class="current-equipped" v-if="currentEquipped">
      <div class="section-title">当前装备</div>
      <div class="equipped-skill">
        <image class="skill-icon" :src="getSkillIcon(currentEquipped.icon)" mode="aspectFit" />
        <div class="skill-info">
          <div class="skill-name">{{ currentEquipped.name }}</div>
          <div class="skill-level">Lv.{{ currentEquipped.level }}</div>
          <div class="skill-type" :class="currentEquipped.type">{{ getTypeText(currentEquipped.type) }}</div>
        </div>
        <button class="unequip-btn" @click="unequipSkill">卸下</button>
      </div>
    </div>

    <!-- 筛选栏 -->
    <div class="filter-bar">
      <div 
        class="filter-item" 
        :class="{active: activeFilter === 'all'}"
        @click="switchFilter('all')"
      >
        全部
      </div>
      <div 
        class="filter-item" 
        :class="{active: activeFilter === 'active'}"
        @click="switchFilter('active')"
      >
        主动
      </div>
      <div 
        class="filter-item" 
        :class="{active: activeFilter === 'passive'}"
        @click="switchFilter('passive')"
      >
        被动
      </div>
      <div 
        class="filter-item" 
        :class="{active: activeFilter === 'unequipped'}"
        @click="switchFilter('unequipped')"
      >
        未装备
      </div>
    </div>

    <!-- 可装备武学列表 -->
    <scroll-view class="skill-list" scroll-y="true">
      <div 
        class="skill-item" 
        :class="{equipped: skill.equipped, disabled: skill.equipped && skill.equippedSlot !== slotIndex}"
        v-for="skill in filteredSkills" 
        :key="skill.id"
        @click="selectSkill(skill)"
      >
        <image class="skill-icon" :src="getSkillIcon(skill.icon)" mode="aspectFit" />
        <div class="skill-info">
          <div class="skill-header">
            <text class="skill-name">{{ skill.name }}</text>
            <div class="skill-level">Lv.{{ skill.level }}</div>
            <div class="skill-type" :class="skill.type">{{ getTypeText(skill.type) }}</div>
          </div>
          <div class="skill-description">{{ skill.description }}</div>
          <div class="skill-effects">
            <text 
              class="effect-text" 
              v-for="effect in getSkillEffects(skill)" 
              :key="effect.type"
            >
              {{ effect.name }}: {{ effect.value }}
            </text>
          </div>
        </div>
        <div class="skill-status">
          <div v-if="skill.equipped && skill.equippedSlot !== slotIndex" class="equipped-elsewhere">
            已装备在槽位{{ skill.equippedSlot + 1 }}
          </div>
          <div v-else-if="skill.equipped && skill.equippedSlot === slotIndex" class="equipped-here">
            当前装备
          </div>
          <div v-else class="can-equip">
            点击装备
          </div>
        </div>
      </div>
      
      <!-- 空状态 -->
      <div v-if="filteredSkills.length === 0" class="empty-state">
        <text class="empty-text">没有符合条件的武学</text>
      </div>
    </scroll-view>
  </div>
</template>

<script>
export default {
  data() {
    return {
      slotIndex: 0, // 槽位索引
      activeFilter: 'all', // 筛选条件
      skills: [], // 所有已学会的武学
      currentEquipped: null, // 当前槽位装备的武学
      loading: false
    }
  },
  
  computed: {
    // 根据筛选条件过滤武学
    filteredSkills() {
      let filtered = this.skills;
      
      // 按类型筛选
      if (this.activeFilter === 'active') {
        filtered = filtered.filter(skill => skill.type === 'active');
      } else if (this.activeFilter === 'passive') {
        filtered = filtered.filter(skill => skill.type === 'passive');
      } else if (this.activeFilter === 'unequipped') {
        filtered = filtered.filter(skill => !skill.equipped);
      }
      
      return filtered;
    }
  },
  
  onLoad(options) {
    this.slotIndex = parseInt(options.slot || 0);
    this.loadPlayerSkills();
  },
  
  methods: {
    // 切换筛选条件
    switchFilter(filter) {
      this.activeFilter = filter;
    },
    
    // 加载玩家武学
    async loadPlayerSkills() {
      this.loading = true;
      try {
        const res = await uni.request({
          url: `${this.$config.baseUrl}/api/player/skills`,
          method: 'GET',
          header: {
            'Authorization': uni.getStorageSync('token')
          }
        });
        
        if (res.data.code === 200) {
          this.skills = res.data.data.skills || [];
          const equippedSkills = res.data.data.equippedSkills || [];
          
          // 设置当前装备的武学
          this.currentEquipped = equippedSkills[this.slotIndex];
          
          // 为每个武学添加装备状态信息
          this.skills.forEach(skill => {
            const equippedIndex = equippedSkills.findIndex(equipped => 
              equipped && equipped.id === skill.id
            );
            if (equippedIndex !== -1) {
              skill.equipped = true;
              skill.equippedSlot = equippedIndex;
            } else {
              skill.equipped = false;
              skill.equippedSlot = -1;
            }
          });
        } else {
          uni.showToast({
            title: res.data.message || '获取武学列表失败',
            icon: 'none'
          });
        }
      } catch (error) {
        console.error('加载武学列表失败:', error);
        uni.showToast({
          title: '网络错误',
          icon: 'none'
        });
      } finally {
        this.loading = false;
      }
    },
    
    // 选择武学装备
    async selectSkill(skill) {
      // 如果武学已装备在其他槽位，提示用户
      if (skill.equipped && skill.equippedSlot !== this.slotIndex) {
        uni.showModal({
          title: '提示',
          content: `该武学已装备在槽位${skill.equippedSlot + 1}，是否要移动到当前槽位？`,
          success: (res) => {
            if (res.confirm) {
              this.equipSkill(skill.id);
            }
          }
        });
        return;
      }
      
      // 如果武学已装备在当前槽位，不做任何操作
      if (skill.equipped && skill.equippedSlot === this.slotIndex) {
        uni.showToast({
          title: '该武学已装备在当前槽位',
          icon: 'none'
        });
        return;
      }
      
      // 装备武学
      this.equipSkill(skill.id);
    },
    
    // 装备武学到指定槽位
    async equipSkill(skillId) {
      try {
        const res = await uni.request({
          url: `${this.$config.baseUrl}/api/skills/${skillId}/equip`,
          method: 'POST',
          data: {
            slot: this.slotIndex
          },
          header: {
            'Authorization': uni.getStorageSync('token')
          }
        });
        
        if (res.data.code === 200) {
          uni.showToast({
            title: '装备成功！',
            icon: 'success'
          });
          
          // 延迟返回上一页
          setTimeout(() => {
            uni.navigateBack();
          }, 1500);
        } else {
          uni.showToast({
            title: res.data.message || '装备失败',
            icon: 'none'
          });
        }
      } catch (error) {
        console.error('装备武学失败:', error);
        uni.showToast({
          title: '网络错误',
          icon: 'none'
        });
      }
    },
    
    // 卸下当前装备的武学
    async unequipSkill() {
      if (!this.currentEquipped) return;
      
      try {
        const res = await uni.request({
          url: `${this.$config.baseUrl}/api/skills/${this.currentEquipped.id}/unequip`,
          method: 'POST',
          header: {
            'Authorization': uni.getStorageSync('token')
          }
        });
        
        if (res.data.code === 200) {
          uni.showToast({
            title: '卸下成功！',
            icon: 'success'
          });
          
          // 更新本地状态
          this.currentEquipped = null;
          const skill = this.skills.find(s => s.id === this.currentEquipped.id);
          if (skill) {
            skill.equipped = false;
            skill.equippedSlot = -1;
          }
        } else {
          uni.showToast({
            title: res.data.message || '卸下失败',
            icon: 'none'
          });
        }
      } catch (error) {
        console.error('卸下武学失败:', error);
        uni.showToast({
          title: '网络错误',
          icon: 'none'
        });
      }
    },
    
    // 获取武学效果
    getSkillEffects(skill) {
      if (!skill.effects) return [];
      return skill.effects.map(effect => ({
        ...effect,
        value: effect.baseValue + (effect.growthValue * (skill.level - 1))
      })).slice(0, 2); // 只显示前两个效果
    },
    
    // 获取武学图标路径
    getSkillIcon(icon) {
      return `/static/icons/skills/${icon}`;
    },
    
    // 获取类型文本
    getTypeText(type) {
      return type === 'active' ? '主动' : '被动';
    }
  }
}
</script>

<style scoped>
.equip-container {
  min-height: 100vh;
  background-color: #f5f5f5;
}

/* 页面头部 */
.page-header {
  background-color: #fff;
  padding: 20px 15px;
  border-bottom: 1px solid #e0e0e0;
}

.page-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

/* 当前装备 */
.current-equipped {
  background-color: #fff;
  margin: 10px;
  border-radius: 8px;
  padding: 15px;
}

.section-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin-bottom: 15px;
  border-left: 3px solid #1890ff;
  padding-left: 10px;
}

.equipped-skill {
  display: flex;
  align-items: center;
  padding: 15px;
  background-color: #f0f8ff;
  border-radius: 8px;
  border: 1px solid #1890ff;
}

.equipped-skill .skill-icon {
  width: 50px;
  height: 50px;
  margin-right: 15px;
  border-radius: 8px;
}

.equipped-skill .skill-info {
  flex: 1;
}

.equipped-skill .skill-name {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin-bottom: 5px;
}

.equipped-skill .skill-level {
  font-size: 14px;
  color: #666;
  margin-bottom: 5px;
}

.equipped-skill .skill-type {
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 10px;
  color: #fff;
}

.equipped-skill .skill-type.active {
  background-color: #ff4d4f;
}

.equipped-skill .skill-type.passive {
  background-color: #52c41a;
}

.unequip-btn {
  padding: 8px 16px;
  background-color: #ff4d4f;
  color: #fff;
  border: none;
  border-radius: 20px;
  font-size: 14px;
}

/* 筛选栏 */
.filter-bar {
  display: flex;
  background-color: #fff;
  padding: 10px 15px;
  border-bottom: 1px solid #e0e0e0;
}

.filter-item {
  padding: 8px 16px;
  margin-right: 10px;
  border-radius: 20px;
  font-size: 14px;
  color: #666;
  background-color: #f0f0f0;
  transition: all 0.3s;
}

.filter-item.active {
  color: #fff;
  background-color: #1890ff;
}

/* 武学列表 */
.skill-list {
  flex: 1;
  padding: 10px;
}

.skill-item {
  display: flex;
  align-items: flex-start;
  background-color: #fff;
  border-radius: 8px;
  margin-bottom: 10px;
  padding: 15px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  transition: all 0.3s;
}

.skill-item.equipped {
  background-color: #f6ffed;
  border: 1px solid #52c41a;
}

.skill-item.disabled {
  opacity: 0.6;
  background-color: #f5f5f5;
}

.skill-item .skill-icon {
  width: 50px;
  height: 50px;
  margin-right: 15px;
  border-radius: 8px;
}

.skill-item .skill-info {
  flex: 1;
}

.skill-header {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.skill-name {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin-right: 10px;
}

.skill-level {
  font-size: 12px;
  color: #666;
  margin-right: 10px;
}

.skill-type {
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 10px;
  color: #fff;
}

.skill-type.active {
  background-color: #ff4d4f;
}

.skill-type.passive {
  background-color: #52c41a;
}

.skill-description {
  font-size: 14px;
  color: #666;
  line-height: 1.4;
  margin-bottom: 8px;
}

.skill-effects {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.effect-text {
  font-size: 12px;
  color: #1890ff;
  background-color: #f0f8ff;
  padding: 2px 6px;
  border-radius: 10px;
}

.skill-status {
  display: flex;
  align-items: center;
  min-width: 80px;
  justify-content: center;
}

.equipped-elsewhere {
  font-size: 12px;
  color: #faad14;
  text-align: center;
  padding: 4px 8px;
  background-color: #fffbe6;
  border-radius: 12px;
}

.equipped-here {
  font-size: 12px;
  color: #52c41a;
  text-align: center;
  padding: 4px 8px;
  background-color: #f6ffed;
  border-radius: 12px;
}

.can-equip {
  font-size: 12px;
  color: #1890ff;
  text-align: center;
  padding: 4px 8px;
  background-color: #f0f8ff;
  border-radius: 12px;
}

/* 空状态 */
.empty-state {
  text-align: center;
  padding: 50px 20px;
}

.empty-text {
  font-size: 16px;
  color: #999;
}
</style>